<template>
  <div>
    <div class="list-text" style>
      <div class="top">
<!--        <img :src="data.albumPics" alt />-->
        <ForRecordDetailBanner :albumPics="data.albumPics"></ForRecordDetailBanner>
      </div>
      <div class="inner-content pdv-6 pdh-6" style="margin-top: 0">
        <div class="title">
          <span class="jf" v-if="commodityInfo.storeId!= 'ggsxshid'">
              {{ data.pointPrice }}
              <p class="text">积分</p>
            </span>
          <div class="one">
            {{ data.productName }}
          </div>
          <div class="two" v-if="commodityInfo.storeId != 'ggsxshid' && commodityInfo.categoryKey == 'BDT_KEY'">
<!--            截止使用日期：{{ data.expireEndTimeStr }}-->
            截止使用日期：{{ data.expireEndTimeStr }}&nbsp;24:00&nbsp;前
<!--            使用期限：截止{{ getDay(data.expireEndTimeStr) }}前-->
          </div>
          <div class="two" v-else-if="commodityInfo.storeId != 'ggsxshid'">
            有效期：{{ data.expireStartTimeStr }} 至 {{ data.expireEndTimeStr }}
<!--            使用期限：自兑换之日起30天内有效-->
          </div>
        </div>
        <div class="description pdv-6" v-html="data.detailMobileHtml"></div>

        <div
          v-if="type == 1 && myIntegrals.totalScore >= data.pointPrice && data.nowStock >0 && commodityInfo.storeId != 'ggsxshid'"
          :class="['default-block-btn', { 'default-disabled': isSucceed }]"
          v-preventReClick="2000"
          @click="duihuan($event)"
        >
          立即兑换
        </div>
        <div
          v-if="type == 1 && myIntegrals.totalScore < data.pointPrice && commodityInfo.storeId != 'ggsxshid'"
          class="default-block-btn default-disabled"
          v-preventReClick="1000"
        >
          积分不足
        </div>
        <div
          v-if="type == 1 && data.nowStock <=0 && commodityInfo.storeId != 'ggsxshid'"
          class="default-block-btn default-disabled"
          v-preventReClick="1000"
        >
          库存不足
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import moment from "moment";
import ForRecordDetailBanner from "./forRecordDetailBanner";
export default {
  props: ["type"],
  components:{ForRecordDetailBanner},
  data() {
    return {
      userInfo: {}, //用户信息
      commodityInfo: '', //商品信息
      myIntegrals: 0, //用户积分
      isSucceed: false, //立即兑换是否调用成功
      data: {},
      qrdhDisabled: false, //防止确认兑换重复提交
    };
  },
  created() {
    this.commodityInfo = JSON.parse(sessionStorage.getItem("commodityInfo"))
    this.userInfo = this.$localStorage.get("userInfo");
    this.myIntegral();
    this.getData();
  },
  methods: {
    // 查询用户积分
    myIntegral() {
      let data = {
        userId: this.userInfo.id,
      };
      this.fetchService.myIntegral(data.userId).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.myIntegrals = res.data;
      });
    },
    // 获取商品详情
    getData() {
      this.fetchService
        .mallGetProductInfo(this.commodityInfo.productId)
        .then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message);
          }
          if (res.code == 0) {
            this.data = res.data;
          }
        });
    },
    //立即兑换
    duihuan(e) {
      if (e.target.disabled) {
        return false;
      }
      var data = {
        goodsId: this.commodityInfo.productId,
        userId: this.userInfo.id,
      };
      this.$createDialog({
        type: 'confirm',
        icon: '',
        title: '温馨提示',
        content: '本券兑换成功后不可退换，请确认！兑换成功后，请前往“红云超市”→“兑换记录”或者在“我的”→“兑换记录”里查看使用。',
        confirmBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '确认',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        onCancel: () => {
          if (this.qrdhDisabled) {
            return;
          }
          this.qrdhDisabled = true;
          setTimeout(() => {
              this.qrdhDisabled = false;
          }, 2000);
          this.fetchService.mallCreateOrder(data).then((res) => {
            if (res.code !== 0) {
              return tools.tip(res.message);
            }
            this.isSucceed = true;
            tools.tip("兑换成功");
            // tools.back();
            setTimeout(() => {
              tools.back();
            }, 200);
          });
        }
      }).show()
    },
    getDay(createTime){
      return moment(createTime).format("yyyy年MM月DD日")
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.top {
  width: 100%;
  text-align: center;
  padding: 10px 10px 7px;
  img {
    width: 100%;
  }
}
.title {
  font-size: $bigFontSize;
  border-bottom: 1px solid #e5e5e5;

  .one {
    font-weight: bolder;
    padding-bottom: 10px;
    width: 80%;
  }
  .jf {
    font-weight: bold;
    font-size: inherit;
    color: #e20002;
    text-align: center;
    float: right;
    .text {
      font-size: $tipFontSize;
      color: #000000;
    }
  }
  .two {
    font-size: $defaultFontSize;
    color: #9a9a9a;
    padding-bottom: 10px;
  }
}
.description {
  font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
  min-height: 680px;
  font-size: 16PX ;
  color: #333 !important;
  text-align: justify;
  >>> p {
    font-size: 16PX ;
    font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    color: #333 !important;
    >img{
      width: 100%;
    }
  }
  /deep/ span{
    color: #333 !important;
    font-weight: inherit ;
    font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
  }
  >strong{
    font-weight: inherit ;
    font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
  }
  >img{
    width: 100%;
  }
  /deep/ li {
    font-size: 14PX ;
    color: #333 !important;
  }
}
/*标题*/
  .mall_title{
    font-size: 16PX !important;
    color: #000000 !important;
  }
/*详情*/
  .mall_detail{

  }
</style>
